{extend name="base"/}
{block name="resources"}
<style>
    .template-list{display: flex;flex-wrap: wrap;padding: 20px;}
    .template-list li{overflow: hidden;position: relative;padding: 12px;margin-left: 32px;margin-bottom: 32px;width: 270px;height: 440px;border: 1px solid #e9e9e9;border-radius: 4px;box-sizing: border-box;}
    .template-list li .item-img{overflow: hidden;width: 244px;height: 355px;}
    .template-list li .item-img img{max-width: 100%;}
    .template-list li .item-hide{display: none;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0,0,0,.6);text-align: center;}
    .template-list li .item-name{display: block;padding-top: 7px;line-height: 22px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .template-list li .item-hide .item-btn-box{position: absolute;top: 50%;left: 50%;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;transform: translate(-50%, -50%);}
    .template-list li .item-hide button{border: 1px solid #fff;display: flex;justify-content: center;align-items: center;height: 33px;width: 100px;color: #fff;background: none;border-radius: 4px;cursor: pointer;}
    .template-list li:hover .item-hide{display: block;}
    .template-list li .item-hide button ~ button{margin-top: 15px;}
</style>
{/block}
{block name="main"}
<ul class="template-list">
    {foreach name="$template" item="vo"}
    <li data-name="{$vo.name}" data-title="{$vo.title}" data-preview="{$vo.preview}" data-desc="{$vo.desc}">
        <div class="item-img">
            <img src="{:img($vo.cover)}" alt="">
        </div>
        <span class="item-name">{$vo.title}</span>
        <div class="item-hide">
            <div class="item-btn-box">
                <button class="use" onclick="createTemplate('{$vo.name}')">立即使用</button>
                <button class="preview" onclick="$('#{$vo.name}').click()">预览</button>
            </div>
        </div>
        <img id="{$vo.name}" class="layui-hide" src="{:img($vo.preview)}" layer-src>
    </li>
    {/foreach}
</ul>
{/block}
{block name="script"}
<script>
// 使用模板
function createTemplate(name) {
    // location.href = ns.url("shop/diy/index",{ template_key : name, source : 'template' });
    $.ajax({
        type: 'post',
        url: ns.url("shop/diy/create"),
        data:{
            name: name
        },
        dataType: 'JSON',
        success: function(res) {
            if (res.code >= 0){
                location.href = ns.url("shop/diy/index");
            }else{
                layer.msg(res.message);
            }
        }
    });
}
</script>
{/block}